import { Form, Table, Spin, Row, Col } from 'antd';
import Cls from 'classnames';
import { useContext, useEffect, useMemo, useState, useRef, Ref } from 'react';
import { connect } from 'umi';
import { getTableColumns } from '../mconfig/ModalColumns';
import { getTableColumn } from '../mconfig/TransferTablecolumn';
import { Button, Modal } from 'antd';
import { SchemaManage } from '@/components/SchemaComponent';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import pageStyles from '@/common/pageLayout.less';
import { MaterialModalServices } from '../services';
import { UpdateTableCommon } from './UpdateTableCommon';
import { getKeyRouter, getLoadMapList, getTenantID, onCloseModalCommon } from '@/utils';
import { ThemeContext } from '../mconfig/UpdateConfig';

const TransferView: React.FC<any> = ({ curRes }) => {
  const valueObj = useContext(ThemeContext);

  const styleFixCls = 'contract-styfixcls-';

  const addMaterialRef: Ref<IOneModalRef> = useRef(null);
  const { data, loading, searchList, pagination, reloadRequest, manageTableParams } = MaterialModalServices(curRes);

  const prefixCls = 'need-update-';

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [checkMaterialList, setCheckMaterialList] = useState<Record<string, any>[]>([]);
  const [tableList, setTableList] = useState<Record<string, any>[]>([]);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    onCloseModalCommon(addMaterialRef);
    setIsModalOpen(false);
  };

  const onPageChange = (current: number, pageSize: number) => {
    // getManageData({ ...params, current, pageSize });
  };

  const ModalTable: any = useRef();

  /**切换头部方法*/
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {};

  /**重置方法*/
  const onReset = () => {
    // reloadRequest({ ...reqParams });
  };

  /**搜索方法*/
  const onSearch = () => {
    // reloadRequest({ ...reqParams });
  };

  /** 点击选中 */
  const onSelectTable = (selectInfo) => {
    setCheckMaterialList(selectInfo);
  };

  const dataList = [
    {
      id: 1,
      assetName: '衣架',
      brandTypeName: '三星',
      sourceTypeName: '进口',
      assetStoreName: '北京市海淀区知春路物资仓库',
      assetValue: 14,
      quantityOrArea: 3,
      unitOfMeasurement: '个',
      applyState: '其他固定资产',
      workflowID: '2',
      applyStartTime: '1',
    },
    {
      id: 2,
      assetName: '传真机',
      brandTypeName: '三星',
      sourceTypeName: '进口',
      assetStoreName: '北京市顺义区顺覃路仓库',
      assetValue: 34,
      quantityOrArea: 6,
      unitOfMeasurement: '台',
      applyState: '一般办公设备',
      workflowID: '2',
      applyStartTime: '1',
    },
    {
      id: 3,
      assetName: '显示屏',
      brandTypeName: '三星',
      sourceTypeName: '进口',
      assetStoreName: '北京市宣武区宣函路顺覃路仓库',
      assetValue: 156,
      quantityOrArea: 8,
      unitOfMeasurement: '台',
      applyState: '一般办公设备',
      workflowID: '2',
      applyStartTime: '1',
    },
  ];

  const delSelectRow = (record: any) => {
    const tempArr = [...tableList];
    const newData = tempArr?.filter((item: any) => item.id != record.id);

    setTableList(newData);
    setCheckMaterialList(newData);
  };

  const getTable: Record<string, any>[] = useMemo(() => {
    return getTableColumn(valueObj, delSelectRow, showModal);
  }, [tableList]);

  const getTableModalColumn: Record<string, any>[] = useMemo(() => {
    return getTableColumns();
  }, [tableList]);

  return (
    <>
      <div className={Cls('list-table', 'descriptionsType-tableSty')}>
        <Table columns={getTable} bordered size="small" dataSource={tableList} scroll={{ x: 1200, y: '' }} pagination={false} rowKey={(res) => res?.id} />
      </div>
      {isModalOpen ? (
        <OneModal
          open={true}
          getContainer={false}
          ref={addMaterialRef}
          title={'添加需求资产'}
          width={1000}
          onCancel={handleCancel}
          bodyStyle={{ padding: '15px' }}
          footer={[
            <Button
              key="back"
              loading={false}
              onClick={() => {
                onCloseModalCommon(addMaterialRef);
              }}
            >
              取消
            </Button>,
            <Button
              key="submit"
              type="primary"
              loading={false}
              onClick={() => {
                setTableList(checkMaterialList);
                onCloseModalCommon(addMaterialRef);
              }}
            >
              添加
            </Button>,
          ]}
        >
          <Spin spinning={false}>
            <Row className={`${styleFixCls}materialModal`}>
              <Col span={24}>
                <UpdateTableCommon
                  styleFixCls={styleFixCls}
                  searchProps={{
                    searchList,
                    onReset,
                    onSearch,
                  }}
                  selectTablePorps={{
                    onSelectTable,
                    selectRowObjList: checkMaterialList,
                    selectType: 'checkbox',
                    setCheckRows: () => {},
                  }}
                  tableProps={{
                    columns: getTableModalColumn,
                    loading,
                    dataSource: dataList,
                    pagination,
                    onPageChange,
                    rowKey: 'id',
                    tableTotalShow: (total: any, range: any) => {
                      return (
                        <div
                          style={{
                            display: 'flex',
                            width: '100%',
                            justifyContent: 'space-between',
                          }}
                        >
                          <div>{/* 已选择<strong style={{ color: 'red' }}> {checkMaterialList?.length} </strong>条物料 */}</div>
                          {/* <div>{showTotalInfo(total, range)}</div> */}
                        </div>
                      );
                    },
                  }}
                />
              </Col>
            </Row>
          </Spin>
        </OneModal>
      ) : null}
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(TransferView);
